import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Popover, Icon,Tools } from 'weaver-mobile';
import { TabPage } from 'weaver-mobile-page';
 
import ApplyInfo from './ApplyInfo';  // 申请加入
import ApplyApprove from './ApplyApprove';  // 申请审批
import ApplyLog from './ApplyLog';  // 申请历史
import QuitedCowork from './QuitedCowork'; // 已退出协作
const getLabel = Tools.getLabel;

@withRouter
@inject('applyStore')
@observer
export default class Apply extends React.Component {
  
  static defaultProps = {
    prefixCls: 'cowork-apply',
	}

	componentWillUnmount() {
    const { applyStore: { closeAllModel, clear } } = this.props;
    closeAllModel();
    clear();
  }

  // Popover选择操作
  onSelect = () => {
    const { applyStore: { topKey, setStoreState } } = this.props;
    setStoreState({ visible: false });
    if (topKey === 'apply') {
      setStoreState({ showApplyCheck: true });
    } else  if (topKey === 'approval'){
      setStoreState({ showApplyApproveCheck: true });
    } else {
      setStoreState({ showApplyLogCheck: true });
    }
  }

  render(){
    const { prefixCls, applyStore: { setStoreState, visible, topKey } } = this.props;
    const tabs = [ 
      { key: 'apply', title: getLabel(83214,"申请加入"), topKey:'apply'},
      { key: 'approval', title: getLabel(83215,"申请审批"), topKey:'approval'},
      { key: 'applyLog', title: getLabel(83216,"申请历史"), topKey:'applyLog'},
      { key: 'quited', title: getLabel('513140','已退出协作'), topKey: 'quited'}
    ];
    const tabBtn = [];
    if (topKey === "apply" || topKey === 'approval') {
      tabBtn.push(
        <Popover 
          mask
          visible={visible}
          overlay={[<Popover.Item>{getLabel(-81455,"批量操作")}</Popover.Item>]}
          onSelect={this.onSelect}
          onVisibleChange={visible => setStoreState({ visible })}
        >
          <Icon key='ellipsis' type='ellipsis' />
        </Popover>
      )
    }
    const tabProps = {
      onChange: (tab) => {setStoreState({ topKey:tab.topKey }) },
      page: topKey,
    };

    return (
      <div className={prefixCls}>
        <TabPage
          tabs={tabs}
          btns={tabBtn}
          tabProps={tabProps}
        />
        { topKey === 'apply' && <ApplyInfo /> }
        { topKey === 'approval' && <ApplyApprove /> }
        { topKey === 'applyLog' && <ApplyLog /> }
        { topKey === 'quited' && <QuitedCowork/> }
      </div>
    );
  }
}